﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/public.css">
    <!--<link rel="stylesheet" href="css/font-awesome-4.5.0/css/font-awesome.min.css" />-->
    <title>营销管理</title>
    <style>
        body{
            overflow-x: hidden;
        }
        .containeritem{
            width:96%;
            margin:0 auto;
            position:relative;
        }
        .contentitem{
            width:100%;
            border:1px solid rgb(46,182,185);
            /*border-radius:6px;*/
            margin:8px 0;
            overflow:hidden;
            position:relative;
        }
        .item{
            width:50%;
            text-align:center;
            float:left;
            padding:8px 0;
            color:rgb(46,182,185);
            z-index: 999;
            position: relative;
        }
        .active{
            color:#ffffff;
        }
        .picbox{
            float:left;
            width:24%;
            min-height: 20px;
        }
        .msgcontent{
            float:left;
            width:76%;
        }
        .pic{
            border-radius:50%;
            width:74%;
            display: block;
            margin:0 auto;
        }
        .person{
            font-size: 18px;
            line-height: 26px;
        }
        .time{
            float:right;
            font-size: 14px;
        }
        .done{
            padding:10px 0;
            font-size:16px;
            color:rgb(140,140,140);
        }
        .objs span{
            font-size: 14px;
            color:rgb(46,182,185);
            display:inline-block;
        }
        .fr{
            float:right;
        }
        .fl{
            float:left;
        }
        .itemproject{
            width:100%;
            position:absolute;
        }
        #bg{
            height:100%;
            position:absolute;
            width:50%;
            background:rgb(46,182,185);
            z-index:0;
        }

        .tc{
            border-bottom: 2px solid rgb(230,230,230);
            padding:10px 0 8px;
        }
        .fc1{
            color:rgb(100,100,100)
        }
        h1{
            color:#fff;
        }
        .tleheader{
            background: rgb(46,182,185);
            border:none;
        }
        .pdx{
            margin:0 1em;
        }
        .w50c{
            width:98%;
        }
        .h{
            height:50px;
            padding:30px 0;
        }
        .mt12{
            margin-top:8px;
        }
        textarea{
            resize:none;
            width: 94%;
            padding:10px 3%;
            font-size:16px;
            border: none;
            outline: none;
        }
        .textarea{
            resize:none;
            width: 94%;
            padding:10px 3%;
            font-size:16px;
            border: none;
        }
        .backbtn{
            z-index: 999;
        }
    </style>
</head>
<body class="bgg">
    <header class="tleheader">
        <p class="backbtn"><a style="margin:0;">
            <img src="../../icon/arrow/zjt.PNG" class="backpic" alt="">
            <span>返回</span></a>
        </p>
        <h1 class="tc" style="border: none;padding:0;opacity: 0;">营销管理</h1>
        <!--<p class="somebtn">-->
            <!--<span><a href="">管理</a></span>-->
        <!--</p>-->
    </header>
<div class="containeritem">
    <div class="contentitem bgw">
        <div class="item active" style="border: none;">人脉</div>
        <div class="item" style="margin-left:-1px;border: none;border-left:1px solid rgb(45,181,185);border-right:1px solid rgb(45,181,185)">公司</div>
        <div class="item" style="margin-left:-1px;">项目</div>
        <div id="bg"></div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>


    <div class="itemproject" style="left:0;">
        <div class="w100 bgw pdy8">
            <p class="bb pdx cg">项目名称：云顶国际项目改造</p>
            <p class="bb pdx cg">建筑面积：5000平方米</p>
            <p class="bb pdx cg">合同总额：320万</p>
        </div>
        <div class="mt12">
            <div class="w50 fl">
                <div class="w50c bgw tc" style="padding:0">
                    <img src="http://placehold.it/500x400" class="w100 db" alt="">
                </div>
            </div>
            <div class="w50 fl">
                <div class="w50c bgw fr tc"  style="padding:0">
                    <img src="http://placehold.it/500x400" class="w100 db" alt="">
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="mt12 bgw">
            <div class="textarea cg">
                <p>施工范围文字说明：</p>
                <p>施工范围文字说明施工范围文字说明施工范围文字说明施工范围文字说明</p>
            </div>
        </div>
        <div class="bgb cw tc pdy8 mt12">
            确定
        </div>
    </div>
    <div class="itemproject" style="left:120%;">

        <div class="mt12">
            <div class="w50 fl">
                <div class="w50c bgw tc" style="padding:0">
                    <img src="http://placehold.it/500x400" class="w100 db" alt="">
                </div>
            </div>
            <div class="w50 fl">
                <div class="w50c bgw fr tc"  style="padding:0">
                    <img src="http://placehold.it/500x400" class="w100 db" alt="">
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="mt12 bgw">
            <div class="textarea cg">
                <p>施工范围文字说明：</p>
                <p>施工范围文字说明施工范围文字说明施工范围文字说明施工范围文字说明</p>
            </div>
        </div>
        <div class="bgb cw tc pdy8 mt12">
            确定
        </div>
    </div>
    <div class="itemproject" style="left:240%;">
        <div class="mt12 bgw">
            <!--<textarea name="" id="" cols="30" rows="10" placeholder="施工范围文字说明"></textarea>-->
            <div class="textarea cg">
                <p>施工范围文字说明：</p>
                <p>施工范围文字说明施工范围文字说明施工范围文字说明施工范围文字说明</p>
            </div>
        </div>
        <div class="mt12 bgw">
            <!--<textarea name="" id="" cols="30" rows="10" placeholder="施工范围文字说明"></textarea>-->
            <div class="textarea cg">
                <p>施工范围文字说明：</p>
                <p>施工范围文字说明施工范围文字说明施工范围文字说明施工范围文字说明</p>
            </div>
        </div>
        <div class="bgb cw tc pdy8 mt12">
            确定
        </div>
    </div>
</div>
<script type="text/javascript" src="../../js/back.js"></script>
<script>
    var item = document.getElementsByClassName("item");
    var itempro = document.getElementsByClassName("itemproject");
    var bg = document.getElementById("bg");
    bg.style.width = 100/3 + "%";

    for(var j = 0; j < item.length; j++){
        item[j].setAttribute("class","item");
        item[j].style.color = "rgb(46,182,185)";
        item[j].style.width = 100/3 + "%";
    }
    item[0].style.color = "#fff";
    var itemfunc = new Array();
    var itemprofunc = new Array();
    for(var i = 0; i < item.length; i++){
        itemfunc[i] = function(x){
            item[x].onclick = function(){
                for(var j = 0; j < item.length; j++){
                    item[j].setAttribute("class","item");
                    item[j].style.color = "rgb(46,182,185)";
                    item[j].style.width = 100/3 + "%";
                    var k =  j - x*2;
                    itempro[j].style.transition = "-webkit-transform .2s cubic-bezier(0.75,0.1,0.25,1)";
                    itempro[j].style.webkitTransform = "translateX("+ 120 * k +"%)";
                }
                bg.style.transition = "-webkit-transform .2s cubic-bezier(0.75,0.1,0.25,1)";
                bg.style.webkitTransform = "translateX("+ 100 * x +"%)";
                this.style.color = "rgb(255,255,255)";
            }
        }
        itemfunc[i](i)
    }
</script>
</body>
</html>